<template>
  <div class="trade">
    <h3>
      <ul class="tabs">
        <li class="tab" :class="{ active: current === tab.value }" v-for="tab in tabs" :key="tab.value" @click="change(tab.value)">{{ tab.label }}</li>
      </ul>
    </h3>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, shallowRef, watch } from 'vue'
import dayjs from 'dayjs'
import * as echarts from 'echarts'

import { DATE_TIME_FORMAT } from '@/const'
import { congestionTrendComparison } from '@/services/dashborad'

const tabs = [
  {
    value: 1,
    label: '拥堵指数',
  },
  {
    value: 2,
    label: '平均速度',
  },
  {
    value: 3,
    label: '拥堵里程',
  },
]
const current = ref(tabs[0].value)
const chartRef = ref(null)
const instance = shallowRef<echarts.ECharts | null>(null)
// const congestionData = shallowRef<any>(null)

function change(tab: number) {
  current.value = tab
}

watch(current, reload, { immediate: true })

onMounted(async () => {
  instance.value = echarts.init(chartRef.value, 'dark')
  // const result = await congestionTrendComparison({ code: 1, currentTime: dayjs().format(DATE_TIME_FORMAT) })
  // if (!result) return
  // congestionData.value = { ...result }
  // initCongestionIndex()
})

function initCongestionIndex(raw: any) {
  const { axis, data } = raw
  const { current = [], history = [] } = data || {}
  instance.value?.setOption(
    {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(7,14,33,0.82)',
        borderColor: 'rgba(151,151,151,0.31)',
        textStyle: { color: '#fff' },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        icon: 'path://M0 0 H 10 V 3 L 0 3',
        itemWidth: 10,
        itemHeight: 3,
        data: ['当前拥堵', '30日均值'],
        right: 0,
        top: 0,
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: axis,
          axisLabel: { color: '#717FA1' },
          axisLine: { lineStyle: { color: '#424B69' } },
        },
      ],
      yAxis: [
        {
          type: 'value',
          interval: 0.2,
          splitLine: { show: false },
          axisLabel: { color: '#717FA1' },
          axisLine: { show: true, lineStyle: { color: '#424B69' } },
          min: 1,
        },
      ],
      series: [
        {
          name: '当前拥堵',
          symbol: 'emptyCircle',
          symbolSize: 6,
          type: 'line',
          stack: 'Total2',
          smooth: true,
          itemStyle: {
            color: '#00AAFF',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,170,255,0.5)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,170,255,0)', // 100% 处的颜色
                },
              ],
            },
          },
          emphasis: {
            focus: 'series',
          },
          data: current,
        },
        {
          name: '30日均值',
          symbol: 'emptyCircle',
          symbolSize: 6,
          type: 'line',
          stack: 'Total1',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(75,243,249,0.5)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(75,243,249,0)', // 100% 处的颜色
                },
              ],
            },
          },
          itemStyle: {
            color: '#03FDD6',
          },
          emphasis: {
            focus: 'series',
          },
          data: history,
        },
      ],
    },
    { notMerge: true }
  )
}
function initSpeed(raw: any) {
  const { axis = [], data } = raw || {}
  const { current = [], history = [] } = data || {}
  instance.value?.setOption(
    {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(7,14,33,0.82)',
        borderColor: 'rgba(151,151,151,0.31)',
        textStyle: { color: '#fff' },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        icon: 'path://M0 0 H 10 V 3 L 0 3',
        itemWidth: 10,
        itemHeight: 3,
        data: ['当前', '30日均值'],
        right: 0,
        top: 0,
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: axis,
          axisLabel: { color: '#717FA1' },
          axisLine: { lineStyle: { color: '#424B69' } },
        },
      ],
      yAxis: [
        {
          name: 'km/h',
          nameTextStyle: { color: '#717FA1' },
          type: 'value',
          splitLine: { show: false },
          axisLabel: { color: '#717FA1' },
          axisLine: { show: true, lineStyle: { color: '#424B69' } },
          // interval: 0.2,
          // min: 1,
        },
      ],
      series: [
        {
          name: '当前',
          symbol: 'emptyCircle',
          symbolSize: 6,
          type: 'line',
          stack: 'Total2',
          smooth: true,
          itemStyle: {
            color: '#00AAFF',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,170,255,0.5)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,170,255,0)', // 100% 处的颜色
                },
              ],
            },
          },
          emphasis: {
            focus: 'series',
          },
          data: current,
        },
        {
          name: '30日均值',
          symbol: 'emptyCircle',
          symbolSize: 6,
          type: 'line',
          stack: 'Total1',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(75,243,249,0.5)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(75,243,249,0)', // 100% 处的颜色
                },
              ],
            },
          },
          itemStyle: {
            color: '#03FDD6',
          },
          emphasis: {
            focus: 'series',
          },
          data: history,
        },
      ],
    },
    { notMerge: true }
  )
}
function initCongestionMileage(raw: any) {
  const { axis = [], data } = raw || {}
  const { current = [], history = [] } = data || {}
  instance.value?.setOption(
    {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(7,14,33,0.82)',
        borderColor: 'rgba(151,151,151,0.31)',
        textStyle: { color: '#fff' },
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        icon: 'path://M0 0 H 10 V 3 L 0 3',
        itemWidth: 10,
        itemHeight: 3,
        data: ['当前', '30日均值'],
        right: 0,
        top: 0,
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: axis,
          axisLabel: { color: '#717FA1' },
          axisLine: { lineStyle: { color: '#424B69' } },
        },
      ],
      yAxis: [
        {
          name: 'km',
          nameTextStyle: { color: '#717FA1' },
          type: 'value',
          splitLine: { show: false },
          axisLabel: { color: '#717FA1' },
          axisLine: { show: true, lineStyle: { color: '#424B69' } },
        },
      ],
      series: [
        {
          name: '当前',
          symbol: 'emptyCircle',
          symbolSize: 6,
          type: 'line',
          stack: 'Total2',
          smooth: true,
          itemStyle: {
            color: '#00AAFF',
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(0,170,255,0.5)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,170,255,0)', // 100% 处的颜色
                },
              ],
            },
          },
          emphasis: {
            focus: 'series',
          },
          data: current,
        },
        {
          name: '30日均值',
          symbol: 'emptyCircle',
          symbolSize: 6,
          type: 'line',
          stack: 'Total1',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(75,243,249,0.5)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(75,243,249,0)', // 100% 处的颜色
                },
              ],
            },
          },
          itemStyle: {
            color: '#03FDD6',
          },
          emphasis: {
            focus: 'series',
          },
          data: history,
        },
      ],
    },
    { notMerge: true }
  )
}

async function reload(type: number) {
  const result = await congestionTrendComparison({ code: type, currentTime: dayjs().format(DATE_TIME_FORMAT) })
  switch (type) {
    case 1:
      initCongestionIndex(result)
      break
    case 2:
      initSpeed(result)
      break
    case 3:
      initCongestionMileage(result)
      break
  }
}
</script>

<style lang="scss" scoped>
.trade {
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  > h3 {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 38px;
    margin-bottom: 20px;
    background-image: url(../../../assets/bg_title_trade.png);
    background-size: cover;
    .tabs {
      overflow: hidden;
      display: flex;
      font-size: 13px;
      border-radius: 4px;
      background: url(../../../assets/bg_button_group.png) no-repeat;
      background-size: contain;
      .tab {
        list-style: none;
        padding: 3px 9px;
        cursor: pointer;
        color: #0fb2ff;
        &.active {
          color: #fff;
          background: #0f3d5e;
          box-shadow: inset 0px 0px 6px 0px rgba(0, 170, 255, 0.9);
        }
      }
    }
  }
  .chart {
    flex: 1;
  }
}
</style>
